<script setup lang='ts'>
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, ref } from 'vue';
import { getChangetext, getText } from '@/api/interface/http1';
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { onBeforeUnmount, shallowRef } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

const dialogVisible = ref(false);
const text = ref();

// components: { Editor, Toolbar },
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref('');
const toolbarConfig = {};
const editorConfig = { placeholder: '请输入内容...' };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
});

const handleCreated = (editor: any) => {
    editorRef.value = editor; // 记录 editor 实例，重要！
};

//     editorRef,
//     valueHtml,
const mode = 'default'; // 或 'simple'
//     toolbarConfig,
//     editorConfig,
//     handleCreated


// 请求
let params = reactive({
    pageSize: 10,
    pageNum: 1,
    dictLabel: ''
});

const tableData = ref([]);

function getTextlist() {
    getText(params).then(res => {
        // console.log(res);
        tableData.value = res.rows;
    });
}

getTextlist();
// 编辑
let data = reactive({
    code: '',
    title: '',
    content: '',
    status: '',
    id: ''
});
const change = (index: number, row: any) => {
    dialogVisible.value = true;
    text.value = row.title;
    valueHtml.value = row.content;
    data.id = tableData.value[index].id;
    data.status = tableData.value[index].status;
};
const Savechange = () => {
    data.title = text.value
    if (valueHtml.value !== '') {
        data.content = valueHtml.value;
        getChangetext(data).then(res => {
            // console.log(res);
            ElMessage({
                type: 'success',
                message: '编辑成功！'
            });
            dialogVisible.value = false;
            getTextlist();

        });
    } else if (valueHtml.value = '') {
        ElMessage.error('输入内容不能为空');
    }
};
</script>

<template>
    <div class='section'>
        <el-table :data='tableData' border style='width: 100%;'>
            <el-table-column type='index' width='180' label='序号' />
            <el-table-column prop='title' label='名称' width='564' />
            <el-table-column prop='updateTime' label='更新时间' />
            <el-table-column label='操作'>
                <template #default='scope'>
                    <el-button plain @click='change(scope.$index,scope.row)' style='background-color: transparent;border: none;color: #409EFF'>
                        <span style='font-size: 12px'>编辑</span>
                    </el-button>

                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            v-model='dialogVisible'
            title='编辑'
            width='820'
        >
            <input type='text' v-model='text' class='input'>
            <div style='border: 1px solid #ccc;margin: auto;margin-top: 90px;width: 730px;'>
                <Toolbar
                    style='border-bottom: 1px solid #ccc;'
                    :editor='editorRef'
                    :defaultConfig='toolbarConfig'
                    :mode='mode'
                />
                <Editor
                    style='height: 300px; overflow-y: hidden;'
                    v-model='valueHtml'
                    :defaultConfig='editorConfig'
                    :mode='mode'
                    @onCreated='handleCreated'
                />
            </div>

                <div class='dialog-footer'>
                    <el-button @click='dialogVisible = false'>取消</el-button>
                    <el-button type='primary' @click='Savechange'>
                        保存
                    </el-button>
                </div>

        </el-dialog>
    </div>
</template>

<style scoped lang='less'>
.section {
    padding: 0px 20px;
    margin-top: 20px;

    .input {
        width: 343px;
        height: 42px;
        margin-left: 240px;
        color: black;
        padding-left: 10px;
        font-size: 30px;
        text-align: center;
    }

    :deep(.el-dialog__body) {
        padding-bottom: 5px;
    }

    :deep( .el-table__row ) {
        height: 52px;

        td {
            text-align: center;
        }
    }

    :deep( .cell) {
        height: 27px;
        line-height: 27px;
        text-align: center;
        font-size: 13px;
    }

    :deep(  .el-table_1_column_7 ) {
        color: #00AEF3;
    }

    :deep(.dialog-footer) {
        text-align: center;
        margin: 30px 0;
    }

    :deep(.el-dialog__header ) {
        text-align: left;
        width: 820px;
        height: 20px;
        //background-color: rgb(24, 146, 255);

        .el-dialog__title {
            color: white;
        }
    }

}

</style>
